---
title: フィードバック
image: /images/user-guide/emails/emails_header.png
---

<Frame>
  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
</Frame>

進捗やカウントダウンを示し、右から左に動きます。

<Tabs>

<Tab title="Usage">

```jsx
import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| プロパティ  | タイプ    | 説明                                                     | デフォルト     |
| ------ | ------ | ------------------------------------------------------ | --------- |
| 継続時間   | 数      | プログレスバーアニメーションの総デュレーション（ミリ秒）                           | 3         |
| delay  | 数      | プログレスバーアニメーションの開始遅延時間（ミリ秒）                             | 0         |
| easing | string | プログレスバーアニメーションのイージング関数                                 | easeInOut |
| バーの高さ  | 数      | バーの高さ（ピクセル）                                            | 24        |
| バーの色   | string | バーの色                                                   | グレー80     |
| 自動開始   | ブール型   | `true`の場合、コンポーネントがマウントされたときにプログレスバーアニメーションが自動的に開始されます。 | `真`       |

</Tab>
</Tabs>

## 円形プログレスバー

タスクの進捗を示し、ユーザーに進行中のプロセスを伝達したい場合に、ロード画面などでよく使用されます。

<Tabs>

<Tab title="Usage">

```jsx
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
```

</Tab>

<Tab title="Props">

| プロパティ | タイプ    | 説明            | デフォルト        |
| ----- | ------ | ------------- | ------------ |
| サイズ   | 数      | 円形プログレスバーのサイズ | 50           |
| バーの幅  | 数      | プログレスバーのラインの幅 | 5            |
| バーの色  | string | プログレスバーの色     | currentColor |

</Tab>

</Tabs>
